import { MenuEnum } from "@/enum";
import type { CreateComponentGroupType, CreateComponentType } from "@/views/dataview/packages/public/type";
import { useDataViewStore } from "@/stores/dataview";
import { nextTick, ref, toRaw } from "vue";
import { cloneDeep } from "lodash";

const dataviewStore = useDataViewStore()

export type MenuType = {
    label:string,
    key:MenuEnum | string,
    fn:Function
}

const defaultMenuList :MenuType[]= [
    {
        label:'锁定',
        key:MenuEnum.LOCK,
        fn:()=>dataviewStore.lockFun()
    },
    {
        label:'解锁',
        key:MenuEnum.UNLOCK,
        fn:()=>dataviewStore.unLockFun()
    },
    {
        label:'复制',
        key:MenuEnum.COPY,
        fn:()=>dataviewStore.copy() //这里copy方法单独具备参数，额外处理
    },
    {
        label:'剪切',
        key:MenuEnum.CUT,
        fn:()=>dataviewStore.cut()
    },
    {
        label:'粘贴',
        key:MenuEnum.PARSE,
        fn:(e:MouseEvent)=>dataviewStore.paste(e)
    },
    {
        label:'清空剪切板',
        key:MenuEnum.CLEAR,
        fn:()=>dataviewStore.closeClipboard(undefined)
    },
    {
        label:'删除',
        key:MenuEnum.DELETE,
        fn:()=>dataviewStore.deleteChart()
    }
]

const defaultMultiSelectOptions:MenuType[] = [
    {
        label:'创建分组',
        key:MenuEnum.GROUP,
        fn:()=>dataviewStore.setGroup()
    },
        {
        label:'解除分组',
        key:MenuEnum.UN_GROUP,
        fn:()=>dataviewStore.setUnGroup()
    }
]

const menuList = ref<MenuType[]>([])

// * 无数据传递拥有的选项
const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR]

// 挑选选项
const pickOption = (options:MenuType[],pickList?:MenuEnum[])=>{
    if(!pickList) return options
    const list:MenuType[] = []
    pickList.forEach((item)=>{
        list.push(...options.filter(op=>op.key == item))
    })
    return list
}

// 去除选项
const hideOption = (options:MenuType[],hideList?:MenuEnum[])=>{
    if(!hideList) return options
    return options.filter(op=>{
        return hideList.findIndex(e=>e != op.key) != -1
    })
}

export const handleContextMenu = (
    e: MouseEvent,
    // 右键对象
    targetInstance?: CreateComponentType | CreateComponentGroupType,
    // 判断函数
    optionsHandle?: Function,
    // 隐藏选项列表
    hideOptionsList?: MenuEnum[],
    // 挑选选项列表
    pickOptionsList?: MenuEnum[]
) => {
    // e.stopPropagation()
    // e.preventDefault()
    let target = e.target
    while(target instanceof SVGAElement){
        target = target.parentElement
    }
    dataviewStore.setTargetSelectChart(targetInstance&&targetInstance.id)

    // 多选默认选项
    if(dataviewStore.getTargetChart.selectId.length > 1){
        menuList.value = defaultMultiSelectOptions
    }else{
        // 单选默认选项
        menuList.value = defaultMenuList
    }

    if(!targetInstance){
        menuList.value = pickOption(toRaw(menuList.value),defaultNoItemKeys)
    }
    if(hideOptionsList){
        menuList.value = hideOption([...defaultMultiSelectOptions,...defaultMenuList],hideOptionsList)
    }
    if(pickOptionsList){
        menuList.value = pickOption([...defaultMultiSelectOptions,...defaultMenuList],pickOptionsList)
    }
    if(optionsHandle){
        menuList.value = optionsHandle(
            cloneDeep(toRaw(menuList.value)),
            [...defaultMultiSelectOptions,...defaultMenuList],
            targetInstance
        )
    }
    nextTick(()=>{
        dataviewStore.setMousePosition(e.clientX,e.clientY)
    })
}


export const useContextMenu = ()=>{
    menuList.value = defaultMenuList
    return {
        menuList
    }
}